.main {
    align-items: center;
    top: 25vh;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#welcome {
    position: static;
    height: 57vh;
    width: 100%;
    background-image:url("img/background_UML.png");
    color: rgb(255, 255, 255);
    text-align: center;
    font-size: 35px;
}

#welcome p {
    margin-top: 45.1vh ;
    font-size: 100px;
    font-family:Verdana, Geneva, Tahoma, sans-serif ;
    font-weight: 150;
}

#menu_ {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    position: absolute;
    border: none;
    background-color: none;
    width: 50vw;
    height: 10vh;
    margin: 1vw;
}

#menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#menu>img {
    margin: 5px;
}

#link {
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 32vh;
    

    /*background-color:rgb(178, 178, 226);*/
    background-color: none;
}



small {
    display: none;
    position: absolute;
    left: 6vw;
    top: -1vh;
    color: black;
    font-size: x-large;
    font-weight: 700;
}

@keyframes rotate {  /*定义关键帧 这个是用于旋转的动画*/ 
    0%{

        transform: rotate(0deg);  
    }
    25%{
        transform: rotate(360deg);  
    }
    50%{
        /*
        transform: rotate(0deg);  
        */
        transform: translate(270px,0px);
    }
    75%{
        /*
        transform: rotate(0deg);  
        */
        transform: translate(270px,0px);
    }
}

#weather:hover {
    animation-name: rotate; /*关键帧名称*/
    animation-timing-function:cubic-bezier(0.165, 0.84, 0.44, 1) ; /*动画的速度曲线*/
    animation-iteration-count: 1;  /*动画播放的次数*/
    animation-duration: 6s; /*动画所花费的时间*/

    cursor:pointer ;
}

#weather:hover+small {
    display: inline;
}

/*
@keyframes move {  
    0%{
        left: 10vw;
    }
    25%{
        left: 20vw;
    }
    50%{
        left: 30vw;
    }
    75%{
        left: 40vw;
    }
}


#weather:hover {
    animation-name: move;
    animation-timing-function:cubic-bezier(0.075, 0.82, 0.165, 1) ;
    animation-iteration-count: 1;  
    animation-duration: 3s; 
    animation-direction: alternate;
}

*/


@keyframes scaleDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称 ； 这个是用于缩放的动画*/ 
    0%{
        transform: scale(1);  /*开始为原始大小*/
    }
    25%{
        transform: scale(1.25); /*放大1.1倍*/
    }
    50%{
        transform: scale(1);
    }
    75%{
        transform: scale(1.25);
    }
}

#dialog {

    animation-name: scaleDraw; /*关键帧名称*/
    animation-timing-function: ease-in-out; /*动画的速度曲线*/
    animation-iteration-count: infinite;  /*动画播放的次数*/
    animation-duration: 5s; /*动画所花费的时间*/

}

#dialog:hover {
    animation-play-state:paused ;
    cursor:pointer ;
}




button {
    border: none ;
    /*background-color: paleturquoise;*/
    background-color: rgb(255, 255, 255);
    /*color: rgb(244, 247, 247);*/
    
    /*overflow: hidden;*/
    font-size: 0px;
    border-radius: 70px;
    width: 107px;
    height: 107px;
    margin: 100px;
}

#b1 {
    background-color: none;
    background-image: url("img/personl_inf.png");
}
#b2 {
    background-color: none;
    background-image: url("img/photo_alb.png");
}
#b3 {
    background-color: none;
    background-image: url("img/informal_ess.png");
}
#b4 {
    background-color: none;
    background-image: url("img/other_links.png");
}

button:hover {
    font-size: 37px;
    background-image: none!important;
    color: black;
}

#b1:hover {
    color: rgb(59, 172, 144);
}
#b2:hover {
    color: rgb(168, 59, 172);
}
#b3:hover {
    color: rgb(172, 161, 59);
}
#b4:hover {
    color: rgb(59, 117, 172);
}

#menu_home {
    margin-right: 5px;
}

#footer {
    display: flex;
    flex-direction: row;
    align-content: center;
    height: 5vh;
}

footer {
    text-align: center;
}